<template>
	<view class="u-screen-main f-frowspcen f-bc-whilte">
		<view class="screen-item f-fz14" :class="[checkIsNowScreen('type') ? 'active' : '']" @tap="setNowScreen('type')">
			<view class="screen-txt">
				<text>品牌/型号</text>
				<text class="icon-triangledownfill"></text>
			</view>
			<view class="screen-content" :class="[ show ? 'show' : '' ]" :style="{ height: show ? '720rpx' : '0rpx' }">
				<car-type :top="upx2px(228)" :indexListTop="0" :scrollHeight="`${upx2px(640)}px`"></car-type>
				<view class="scrren-btn-view f-frow">
					<button class="u-btn-item f-fz16 f-cancel">重置</button>
					<button class="u-btn-item f-fz16 f-confirm">确定</button>
				</view>
			</view>
		</view>
		<view class="screen-item f-fz14" :class="[checkIsNowScreen('storage') ? 'active' : '']" @tap="setNowScreen('storage')">
			<view class="screen-txt">
				<text>仓库</text>
				<text class="icon-triangledownfill"></text>
			</view>
			<view class="screen-content" :class="[ show ? 'show' : '' ]" :style="{ height: show ? '600rpx' : '0rpx' }">
				<scroll-view scroll-y="true" class="u-list" style="height: 600rpx;">
					<view class="u-item border-bottom" v-for="item in storageList" :key="item.warehouseId" style="padding: 0 54rpx;">{{ item.warehouseName }}</view>
				</scroll-view>
			</view>
		</view>
		<view class="screen-item f-fz14" :class="[checkIsNowScreen('storageAge') ? 'active' : '']" @tap="setNowScreen('storageAge')">
			<view class="screen-txt">
				<text>库龄</text>
				<text class="icon-triangledownfill"></text>
			</view>
			<view class="screen-content" :class="[ show ? 'show' : '' ]" :style="{ height: show ? '600rpx' : '0rpx' }">
				<scroll-view scroll-y="true" class="u-list" style="height: 600rpx;">
					<view class="u-item border-bottom" style="padding: 0 54rpx;">一个月</view>
					<view class="u-item border-bottom" style="padding: 0 54rpx;">一个月</view>
					<view class="u-item" style="padding: 0 54rpx;">一个月</view>
				</scroll-view>
			</view>
		</view>
		<view class="f-mask" style="z-index: -1;" v-show="show" @tap="show = !show"></view>
	</view>
</template>

<script>
import commonApi from '../../api/common.js';
export default {
	data() {
		return {
			nowScreen: '', // 	type, storage, storageAge
			storageList: [], // 
			show: false
		};
	},
	created() {
		const that = this;
		that.getStorageList();
	},
	methods: {
		/**
		 * 仓库
		 * */ 
		
		getStorageList() {
			const that = this;
			commonApi.getStorageList(1, 10000).then(res => {
				that.storageList = res.data.records;
			})
		},
		
		/**
		 * 设置当前的筛选
		 * */

		setNowScreen(screen) {
			const that = this;
			if (that.nowScreen !== screen) {
				that.nowScreen = screen;
				that.show = true;
			} else {
				that.nowScreen = '';
				that.show = false;
			}
		},
		/**
		 * 检查当前筛选
		 * */

		checkIsNowScreen(screen) {
			return this.nowScreen === screen;
		}
	}
};
</script>

<style lang="scss" scoped>
.u-screen-main {
	width: 100vw;
	height: 100rpx;
	padding: 0 70rpx;
	box-shadow: 0px 13px 13px 0px rgba(28, 30, 33, 0.08);
}
// 筛选item
.screen-item {
	.screen-txt {
		color: #333;
		.icon-triangledownfill {
			transition: all 0.2s ease-in-out;
			color: #999;
			display: inline-block;
		}
	}
}
.screen-content {
	transition: all 0.2s;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	background-color: #ffffff;
	.scrren-btn-view {
		width: 100%;
		height: 80rpx;
		.u-btn-item {
			margin: 0;
			line-height: 80rpx;
			border-radius: 0;
		}
		.f-cancel {
			width: 27%;
			background-color: $uni-btn-bc-grey;
			color: $uni-text-color;
		}
		.f-confirm {
			width: 73%;
			background-color: $uni-bg-color-red;
			color: $uni-text-color-whilte;
		}
	}
}

// 筛选active item
.screen-item.active {
	.screen-txt {
		color: $uni-text-color-red;
		.icon-triangledownfill {
			color: inherit;
			transform: rotate(180deg);
		}
	}
	.screen-content.show {
		visibility: visible;
		opacity: 1;
	}
}
</style>
